<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="version" content="0.0.0">
<title>onnx-modifier</title>
<link rel="stylesheet" type="text/css" href="view-grapher.css">
<link rel="stylesheet" type="text/css" href="view-sidebar.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">
<script src="dagre.js"></script>
<script src="base.js"></script>
<script src="text.js"></script>
<script src="json.js"></script>
<script src="xml.js"></script>
<script src="python.js"></script>
<script src="protobuf.js"></script>
<script src="flatbuffers.js"></script>
<script src="zip.js"></script>
<script src="gzip.js"></script>
<script src="tar.js"></script>
<script src="view-grapher.js"></script>
<script src="view-sidebar.js"></script>
<script src="view.js"></script>
<script src="index.js"></script>
<script src="modifier.js"></script>
<style>
html { touch-action: none; overflow: hidden; width: 100%; height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
body { touch-action: none; overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; }
.dialog {min-width: 400px}
.center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.select { user-select: text; -webkit-user-select: text; -moz-user-select: text; }
.open-file-dialog { display: none; }
.transparent { width: 100%; height: 100%; background-color: #000000; display: none; opacity: 0; }
.graph { display: flex; height: 100%; width: 100%; overflow: auto; outline: none; touch-action: pan-x pan-y; }
.canvas { margin: auto; flex-shrink: 0; text-rendering: geometricPrecision; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.toolbar { position: absolute; top: 10px; left: 10px; padding: 0; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.toolbar button:focus { outline: 0; }
.toolbar-button { background: None; border-radius: 6px; border: 0; margin: 0; padding: 0; fill: None; stroke: #777; cursor: pointer; width: 24px; height: 24px; }
.toolbar-button { float: left; background: None; border-radius: 6px; border: 0; margin: 0; margin-right: 1px; padding: 0; fill: None; stroke: #777; cursor: pointer; width: 24px; height: 24px; }
.toolbar-back-button { float: left; background: #777; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border: 0px solid; border-color: #777; margin: 2px 0 2px 8px; padding: 0 8px 0 8px; cursor: pointer; height: 20px; color: #ffffff; font-size: 11px; line-height: 0; transition: 0.1s; }
.toolbar-back-button:hover { background: #000000; border-color: #000000; }
.toolbar-name-button { float: left; background: rgba(255, 255, 255, 0.95); border-top-right-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #777; color: #777; border-left: 1px; border-left-color: #ffffff; margin: 2px 0 2px 0; padding: 0 12px 0 6px; cursor: pointer; width: auto; height: 20px; font-size: 11px; line-height: 0; transition: 0.1s; }
.toolbar-name-button:hover { color: #000000; }
.graph-op-button {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 20px;
    position:absolute;
    left: 2px;
}

.graph-op-button-reset {
    top: 30px;
}

.graph-op-button-onnxsim {
    top: 170px;
}

.graph-op-button-optimizer {
    top: 205px;
}

.graph-op-button-extract {
    top: 240px;
}
.graph-op-button-reset:active {  background: #e7e7e7; }
.graph-op-button-download {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 20px;
    position:absolute;
    left: 2px;
    top: 65px;
}
.graph-op-button-download:active {  background: #e7e7e7; }
.graph-node-delete { opacity: 0.3 }
.graph-node-hide { opacity: 0}
.download-checkbox-shapeInference {
    width: 12px;
    height: 12px;
}
.download-anno-shapeInference {
    font-family:"Oliviar Sans Light";
    font-size: 12px;
    border:none
}

.download-checkbox-cleanUp {
    width: 12px;
    height: 12px;
}
.download-anno-cleanUp {
    font-family:"Oliviar Sans Light";
    font-size: 12px;
    border:none
}

.graph-op-button-addNode {
    cursor: pointer;
    background-color: white;
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
    font-family:"Oliviar Sans Light";
    font-size: 20px;
    position:absolute;
    left: 2px;
    top: 100px;
}
.graph-op-button-addNode:active {  background: #e7e7e7; }
.graph-op-add-node-dropdown {
    font-size: 15px;
}
.icon .border { stroke: #fff; }
.icon .stroke { stroke: #808080; }
.icon:hover .stroke { stroke: #000000; }
.dropdown { display: none; position: absolute; min-width: 225px; z-index: 1; border-radius: 4px; background-color: #f6f6f6; border: 1px solid rgba(0,0,0,.15); padding-top: 2px; padding-bottom: 2px; margin-left: 2px; overflow: hidden; }
.dropdown button { display: block; border: none; border-radius: 0; background-color: transparent; color: black; width: 100%; text-align: left; padding: 4px 12px 5px 12px; white-space: no-wrap; font-size: 12px; }
.dropdown button:hover { color: #ffffff; background-color: #2e6bd2; }
.dropdown .separator { margin-top: 2px; margin-bottom: 2px; border-top: 1px; border-bottom: 0; border-style: solid; border-color: #e5e5e5; }
.welcome { background-color: #ececec; color: #242424; }
.welcome .logo { width: 582px; height: 228px; }
.welcome .logo-text { top: -57px; width: 582px; transition: 0.1s; }
.welcome .logo-icon { left: 248px; top: -18px; width: 106px; height: 106px; transition: 0.1s; }
.welcome .logo-spinner { left: 248px; top: -18px; width: 106px; height: 106px; display: none; }
.welcome .logo-stroke { stroke: #444444; }
.welcome .logo-fill { fill: #444444; }
.welcome .logo-border { stroke: #555555; }
.welcome .logo-glyph { fill: #444444; }
.welcome .logo-message { display: none; }
.welcome button { font-size: 12px; font-weight: bold; line-height: 1.25; text-align: center; vertical-align: middle; min-width: 60px; height: 32px; border-radius: 16px; transition: 0.1s; user-select: none; -webkit-user-select: none; -moz-user-select: none; color: #444444; background-color: #ececec; border: 1px solid #444444; }
.welcome button:hover { color: #ececec; background-color: #444444; cursor: pointer; transition: 0.2s; }
.welcome button:focus { outline: 0; }
.welcome .open-file-button { top: 190px; left: -150px; width: 125px; opacity: 1; }
.welcome .github-button { top: 190px; left: 150px; width: 125px; opacity: 1; }
.welcome .consent-accept-button { top: 220px; left: 0px; width: 125px; display: none; opacity: 0; }
.welcome .consent-message { top: 120px; left: 0px; font-size: 13px; text-align: center; line-height: 20px; color: #444444; display: none; opacity: 0; }
.welcome .graph { display: none; opacity: 0; }
.welcome.spinner .logo-spinner { display: block; -webkit-animation: orbit 0.5s infinite linear; animation: orbit 0.5s infinite linear; cursor: wait; }
@-webkit-keyframes orbit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes orbit { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.welcome.spinner .logo-spinner-stroke { stroke: #ececec; }
.welcome.spinner .logo-name { display: none; }
.welcome.spinner .open-file-button { opacity: 0; display: none; }
.welcome.spinner .github-button { opacity: 0; display: none; }
.welcome.consent .logo-name { display: none; }
.welcome.consent .open-file-button { opacity: 0; display: none; }
.welcome.consent .github-button { opacity: 0; display: none; }
.welcome.consent .consent-accept-button { opacity: 1; display: block; }
.welcome.consent .consent-message { opacity: 1; display: block; }
.welcome.spinner .graph { display: flex; opacity: 0; }
.welcome .toolbar { display: none; }
.welcome .main-page {display: none;}
.default { background-color: #ffffff; }
.default .logo { display: none; }
.default .graph { display: flex; opacity: 1; }
.default .toolbar { display: table; }
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
.default { background-color: #404040; }
.graph { background-color: #404040; flex: 1;}
.welcome { background-color: #1e1e1e; color: #888888; }
.welcome .logo-stroke { stroke: #888888; }
.welcome .logo-fill { fill: #888888; }
.welcome .logo-border { stroke: #000000; }
.welcome .logo-glyph { fill: #888888; }
.welcome .logo-spinner-stroke { stroke: #ffffff; }
.welcome .logo button { color: #888888; background-color: #1e1e1e; border-color: #888888; }
.welcome .logo button:hover { color: #1e1e1e; background-color: #888888; }
.welcome .consent-message { color: #888888; display: none; opacity: 0; }
.icon .border { stroke: #1d1d1d; }
.icon .stroke { stroke: #aaaaaa; }
.icon:hover .stroke { stroke: #dfdfdf; }
.dropdown { background-color: #373737; border-color: #000000; }
.dropdown button { color: #ffffff; }
.dropdown button:hover { color: #ffffff; background-color: #1d59d1; }
.dropdown .separator { border-color: #5a5a5a; }
.toolbar-back-button { background: #aaaaaa; border-color: #aaaaaa; color: #333333; }
.toolbar-back-button:hover { background: #dfdfdf; border-color: #dfdfdf; }
.toolbar-name-button { background: #404040; border-color: #aaaaaa; color: #cccccc; }
.toolbar-name-button:hover { color: #dfdfdf; }
.top-toolbar { background-color: #1d1d1d; }
}
@media all and (max-width: 640px) {
.welcome .logo { width: 240px; }
.welcome .logo-text { opacity: 0; }
.welcome .logo-name { opacity: 0; }
.welcome .logo-icon { left: 0; top: 0; width: 128px; height: 128px; }
.welcome .logo-spinner { left: 0; top: 0; width: 128px; height: 128px; }
.welcome .logo .open-file-button { top: 180px; left: 0; }
.welcome .logo .github-button { top: 270px; left: 0; }
.welcome .logo .consent-message { top: 140px; }
.welcome .logo .consent-accept-button { top: 310px; }
.about.desktop .logo { width: 320px; padding: 40px; }
}
@media only screen and (max-device-width: 1024px) {
.toolbar-button { width: 32px; height: 32px; }
.toolbar-back-button { margin-top: 6px; margin-bottom: 6px; }
.toolbar-name-button { margin-top: 6px; margin-bottom: 6px; }
}

.message-box {border-style: double; border-radius: 6px; min-width: 400px; cursor: pointer; word-break: break-word;
    background: white;}
.message-box h1 {text-align: center; }
.message-box div {font-size: 16px;}
.message-box .footer {text-align: right; padding-top: 13px;}
.message-box .center-item {text-align: center;}
.dialog .text {text-align: center;}

.message-box:hover .message-box-progress {
    animation-play-state: paused;
}

.message-box-progress {
    height: 1px;
    background-color: #1d59d1;
    animation: progress-like 10s;
}
.message-box-progress-error {
    animation-play-state: paused;
}
@keyframes progress-like {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

#show-message-info {
    border-style: hidden;
    position: fixed;
    bottom: 0px;
    margin-right: 10px;
    max-width: 40vw;
    background: transparent;  
    z-index: 10;
    max-height: 90vh;
    overflow: auto;
}

#show-message-info .message-box {
    padding: 10px;
    margin: 5px 0;
    border-width: 1px;
}

.warn-message-box {background:burlywood}
.error-message-box {background: lightcoral;}
.success-message-box {background: aquamarine;}

.welcome.spinner .main-page { display: flex;}
.main-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.content {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: auto;
}

.sidebar {
    width: min(60%, 750px);
    position: static;
    overflow: auto;
}

.top-toolbar{
    height: 100px;
    background-color: white;
    display: flex;
    flex-shrink: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.toolbar-tab-group {
    display: flex;
    margin: 5px;
    padding: 5px;
    flex-shrink: 0;
}

.toolbar-tab {
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    border-right: solid 1px #a5a5a5;
    padding: 0 15px;
}

.toolbar-tab-title {
    padding: 0 5px;
    margin: 0 5px ;
    font-size: smaller;
    border-bottom: solid 1px #a5a5a5;
}

.toolbar-contant {
    flex-shrink: 0;
    writing-mode: vertical-lr;
    height: calc(2lh + 5*4px + 5*4px);
}

.toolbar-item {
    padding: 5px;
    margin: 5px;
    width: 100px;
    flex-shrink: 0;
    float: left;
    writing-mode: horizontal-tb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

.toolbar-item:hover {
    border-radius: 5px;
    cursor: pointer;
    background-color: gray;
}
.toolbar-menu {
    display: none;
}
.toolbar-item:hover .toolbar-menu {
    display: block;
    position: absolute;
    padding: 5px 0px;
    z-index: 2;
}
.toolbar-menu-item {
    padding: 5px;
    width: 120px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    border-bottom: solid 1px grey;
    background-color: white;
}

.toolbar-menu-item:hover {
    background-color: rgba(128, 128, 128, 1);
}

@media (prefers-color-scheme: dark) {
.top-toolbar { background-color: #1d1d1d; }
.toolbar-menu-item { background-color: #3d3d3d; }
.toolbar-item {background-color: #3d3d3d;}
.message-box {background: #2d2d2d;}
.warn-message-box {background:burlywood}
.error-message-box {background: lightcoral;}
.success-message-box {background: aquamarine;}
}

</style>
</head>
<body class="welcome">
    
<div class="main-page">
<div class="top-toolbar">
    <div class="toolbar-tab-group-title" style="display: none;">
        File
    </div>
    <div class="toolbar-tab-group-title" style="display: none;">
        Modifier
    </div>

    <div class="toolbar-tab-group" id="toolbar-group-file"> 
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > File </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="open-file-button" class="open-file-button"> Open Onnx 
                    <div class="toolbar-menu">
                        <div class="toolbar-menu-item" id="open-new-window-button">Open New Window</div>
                    </div>
                </div>
                <div class="toolbar-item" id="download-graph"> Save File </div>
                <div class="toolbar-item" id="reset-graph" title="Roll back all modifications to the original model"> Reset </div>
                <div class="toolbar-item" id="extract-graph" title="Subnet export. start and end nodes need to be selected"> Extract Sub Net</div>
            </div>
        </div>
    </div>
    <div class="toolbar-tab-group" id="toolbar-group-modify"> 
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > Optimizer </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="onnxsim-graph" title="Invoke onnxsim to optimize the entire network"> OnnxSim </div>
                <div class="toolbar-item" id="auto-optimizer-graph" title="Invoke AutoOptimizer(surgeon) to optimize the entire network. It is an optimization tool based on the knowledge base. For details, see the AIT description document"> AutoOptimizer </div>
            </div>
        </div>
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > Node </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="add-node"> Add Node </div>
            </div>
        </div>
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > Delete Node </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="delete-node"> Delete Node 
                    <div class="toolbar-menu">
                        <div class="toolbar-menu-item" id="delete-node-with-children">Delete With Children</div>
                    </div>
                </div>
                <div class="toolbar-item" id="delete-enter-node"> Delete Enter </div>
                <div class="toolbar-item" id="recover-node"> Recover Node 
                    <div class="toolbar-menu">
                        <div class="toolbar-menu-item" id="recover-node-with-children">Recover With Children</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > Net Input Output </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="add-input"> Add Input </div>
                <div class="toolbar-item" id="remove-input"> Remove Input </div>
                <div class="toolbar-item" id="add-output"> Add Output </div>
                <div class="toolbar-item" id="remove-output"> Remove Output </div>
                <div class="toolbar-item" id="change-input-shape"> Set Input Shape 
                    <div class="toolbar-menu">
                        <div class="toolbar-menu-item" id="batch-size-dynamic">Dynamic Batch Size</div>
                        <div class="toolbar-menu-item" id="batch-size-fixed">Fixed Batch Size</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="toolbar-tab"> 
            <div class="toolbar-tab-title" > Modify Info </div>
            <div class="toolbar-contant">
                <div class="toolbar-item" id="modify-export" title="Export the current modification to a JSON file. You can import and apply these changes later"> Modify Export </div>
                <div class="toolbar-item" id="modify-import" title="Import the JSON file and apply the saved modification steps"> Modify Import </div>
            </div>
        </div>
    </div>


</div>
<div class="content">
<div id="graph" class="graph" tabindex="0">
    <svg id="canvas" class="canvas" preserveaspectratio="xMidYMid meet" width="100%" height="100%">   
        <g id="linecolor">
            <linearGradient id="gradient-start">
                <stop stop-color="red"></stop>
                <stop stop-color="red" offset="0.7"></stop>
                <stop stop-color="orange" offset="1"></stop>
            </linearGradient>
            <linearGradient id="gradient-end">
                <stop stop-color="orange"></stop>
                <stop stop-color="purple" offset="0.4"></stop>
                <stop stop-color="purple" offset="1"></stop>
            </linearGradient>
            <linearGradient id="gradient-start-end">
                <stop stop-color="red"></stop>
                <stop stop-color="orange" offset="0.5"></stop>
                <stop stop-color="purple" offset="1"></stop>
            </linearGradient>
        </g>
    </svg>
</div>
<div id="sidebar" class="sidebar"></div>
<div id="toolbar" class="toolbar" style="top:110px">
    <button id="menu-button" class="toolbar-button" title="Menu">
        <svg class="icon" viewbox="0 0 100 100">
            <rect class="border" x="12" y="12" width="76" height="76" rx="16" ry="16" stroke-width="8"></rect>
            <line class="border" x1="30" y1="37" x2="70" y2="37" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="30" y1="50" x2="70" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="30" y1="63" x2="70" y2="63" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <rect class="stroke" x="12" y="12" width="76" height="76" rx="16" ry="16" stroke-width="4"></rect>
            <line class="stroke" x1="30" y1="37" x2="70" y2="37" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="30" y1="50" x2="70" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="30" y1="63" x2="70" y2="63" stroke-width="4" stroke-linecap="round"></line>
        </svg>
    </button>
    <button id="zoom-in-button" class="toolbar-button" title="Zoom In">
        <svg class="icon" viewbox="0 0 100 100">
            <circle class="border" cx="50" cy="50" r="35" stroke-width="8" stroke="#fff"></circle>
            <line class="border" x1="50" y1="38" x2="50" y2="62" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="38" y1="50" x2="62" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="78" y1="78" x2="82" y2="82" stroke-width="12" stroke-linecap="square" stroke="#fff"></line>
            <circle class="stroke" cx="50" cy="50" r="35" stroke-width="4"></circle>
            <line class="stroke" x1="50" y1="38" x2="50" y2="62" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="38" y1="50" x2="62" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="78" y1="78" x2="82" y2="82" stroke-width="8" stroke-linecap="square"></line>
        </svg>
    </button>

    <button id="zoom-out-button" class="toolbar-button" title="Zoom Out">
        <svg class="icon" viewbox="0 0 100 100">
            <circle class="border" cx="50" cy="50" r="35" stroke-width="8" stroke="#fff"></circle>
            <line class="border" x1="38" y1="50" x2="62" y2="50" stroke-width="8" stroke-linecap="round" stroke="#fff"></line>
            <line class="border" x1="78" y1="78" x2="82" y2="82" stroke-width="12" stroke-linecap="square" stroke="#fff"></line>
            <circle class="stroke" cx="50" cy="50" r="35" stroke-width="4"></circle>
            <line class="stroke" x1="38" y1="50" x2="62" y2="50" stroke-width="4" stroke-linecap="round"></line>
            <line class="stroke" x1="78" y1="78" x2="82" y2="82" stroke-width="8" stroke-linecap="square"></line>
        </svg>
    </button>
    <button id="back-button" class="toolbar-back-button" title="Back">
        &#x276E;
    </button>
    <button id="name-button" class="toolbar-name-button" title="Name">
    </button>
    <div id="menu-dropdown" class="dropdown"></div>
</div>
</div>
</div>
<div class="center logo">
    <a href="https://gitee.com/ascend/ait" target="blank_">
        <svg class="" viewbox="0 0 5120 300">
           <g style="font-size:240pt" >
               <text class="logo-fill" x=200 y=260 textLength="2560">Ascend's</text>
           </g>        
       </svg>
   </a>
    <a href="https://gitee.com/ascend/ait/tree/master/onnx-modifier" target="blank_">
        <img src="./logo.svg"
             title="onnx-modifier is a tool to modify onnx models in a visualization fashion. It is built based on Netron and flask."
             height="130">
    </a>

    <button id="open-file-button-logo" class="center open-file-button">Open Model&hellip;</button>
    <button id="github-button" class="center github-button">Gitee repo</button>
    <input type="file" id="open-file-dialog" class="open-file-dialog" multiple="false" accept=".onnx, .ort, .pb, .meta, .tflite, .lite, .tfl, .keras, .h5, .hd5, .hdf5, .json, .model, .mar, .params, .param, .armnn, .mnn, .ncnn, .tnnproto, .tmfile, .ms, .nn, .uff, .rknn, .xmodel, .kmodel, .paddle, .pdmodel, .pdparams, .nb, .dnn, .cmf, .mlmodel, .mlpackage, .caffemodel, .pbtxt, .prototxt, .pkl, .pt, .pth, .ptl, .t7, .joblib, .cfg, .xml, .zip, .tar">
    <input type="file" id="open-modify-json-dialog" class="open-file-dialog" multiple="false" accept=".json">
    <!-- Preload fonts to workaround Chrome SVG layout issue -->
    <div style="font-weight: normal; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
    <div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
    <div style="font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;">.</div>
</div>
<div id="transparent" class="transparent"></div>
<!-- dialogs -->
<dialog id="show-message-alert" class="message-box dialog"> 
    <h1> </h1>
    <div class="text"> </div>
    <div class="footer"><button onclick="document.getElementById('show-message-alert').close()">OK</button></div>
</dialog>
<dialog id="show-message-confirm" class="message-box confirm-message-box dialog"> 
    <h1> </h1>
    <div class="text"> </div>
    <div class="footer">
        <button>Cancel</button>
        <button>OK</button>
    </div>
</dialog>
<dialog id="show-message-info" open></dialog>
<dialog id="show-about" class="dialog about message-box">
    <a href="https://gitee.com/ascend/ait" target="blank_">
        <svg class="logo-name" viewbox="0 0 5120 300">
           <g style="font-size:240pt" >
               <text class="logo-fill" x=200 y=260 textLength="2560">Ascend's</text>
           </g>        
       </svg>
   </a>
    <a href="https://gitee.com/ascend/ait/tree/master/onnx-modifier" target="blank_">
        <img src="./logo.svg"
             title="onnx-modifier is a tool to modify onnx models in a visualization fashion. It is built based on Netron and flask."
             height="130px">
    </a>

    <div class="logo-message">
        <div style="height: 30px; text-align: center;">Version <span id="version" class="select">{version}</span></div>
        <div style="height: 30px; text-align: center;">Copyright &copy; <a href="https://gitee.com/ascend/ait/" target="blank_">Ascend</a></div>
        <div style="height: 30px; text-align: center;">Thanks <a href="https://github.com/ZhangGe6" target="blank_">ZhangGe6</a></div>
    </div>
    
    <div class="footer"><button onclick="document.getElementById('show-about').close()">OK</button></div>
</dialog>

<dialog id="download-dialog" class="dialog message-box"> 
    <input type="checkbox" id="shapeInference" class="download-checkbox-shapeInference"/> 
    <input type="text" value="shape inference" class="download-anno-shapeInference" readonly/> </td>
    <input type="checkbox" id="cleanUp" class="download-checkbox-cleanUp"/> 
    <input type="text" value="clean up" class="download-anno-cleanUp" readonly/> </td>
    <div class="footer">
        <button>Cancel</button>
        <button>OK</button>
    </div>
</dialog>
<dialog id="addnode-dialog" class="dialog message-box"> 
    <h1> Add New Node </h1>
    <select id="add-node-dropdown" class="graph-op-add-node-dropdown">
    </select>
    <div class="footer">
        <button>Cancel</button>
        <button>OK</button>
    </div>
</dialog>
<dialog id="addinput-dialog" class="dialog message-box"> 
    <h1> Add New Input </h1>
    <div class="text"> </div>
    <div style="display: flex; margin: 5px; justify-content: center;">
        <select id="add-input-dropdown" class="graph-op-add-node-dropdown">
        </select>
    </div>
    <div class="footer">
        <button>Cancel</button>
        <button>OK</button>
    </div>
</dialog>
<dialog id="change-input-shape-dialog" class="dialog message-box"> 
    <h1> Change Input Shape </h1>
    <div class="text"> </div>
    <div style="display: flex; margin: 5px; justify-content: center; flex-direction: column;">
        <input id="change-input-shape-input" type="text" size="32" placeholder="example: batch,3,224,224"/>
        <div>
            <input type="checkbox" class="checkbox-shape-change" checked /> 
            <span class="download-anno-cleanUp"> shape inference </span>
        </div>
    </div>
    
    <div class="footer">
        <button>Cancel</button>
        <button id="change-input-shape-input-ok">OK</button>
    </div>
</dialog>
<dialog id="dynamic-batch-size-dialog" class="dialog message-box"> 
    <h1> Dynamic Input Batch Size </h1>
    <div>
        <input type="checkbox" class="checkbox-shape-change" checked /> 
        <span class="download-anno-cleanUp"> shape inference </span>
    </div>
    <div class="footer">
        <button>Cancel</button>
        <button id="fixed-batch-size-input-ok">OK</button>
    </div>
</dialog>
<dialog id="fixed-batch-size-dialog" class="dialog message-box"> 
    <h1> Fixed Input Batch Size </h1>
    <div class="text"> Please enter batchsize </div>
    <div style="display: flex; margin: 5px; justify-content: center; flex-direction: column;">
        <input id="fixed-batch-size-input" type="text" size="32"/>
        <div>
            <input type="checkbox" class="checkbox-shape-change" checked /> 
            <span class="download-anno-cleanUp"> shape inference  </span>
        </div>
    </div>
    <div class="footer">
        <button>Cancel</button>
        <button id="fixed-batch-size-input-ok">OK</button>
    </div>
</dialog>
</body>
</html>